<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	li{list-style: none; width: 100px; height: 30px; background-color: yellow; margin: 10px;}
	#div1{width: 100px; height: 100px; background-color: red; margin: 200px;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oUl = document.getElementById('ul1');
		var aLi = oUl.getElementsByTagName('li');
		var oDiv = document.getElementById('div1');

		for (var i = 0; i < aLi.length; i++) {
			aLi[i].draggable = "true";			//设置拖拽属性draggable

			aLi[i].ondragstart = function () {			//拖拽开始瞬间及过程中
				this.style.backgroundColor = 'blue';
			}

			aLi[i].ondragend = function () {			//拖拽结束时
				this.style.backgroundColor = 'yellow';
			}

/*
			aLi[i].ondrag = function () {
				document.title = i++;			//拖拽时（包括拖拽不动）连续触发
			}
*/
		};

		//以上是aLi以下是oDiv！！

		oDiv.ondragenter = function () {		//检测到拖拽元素进入时及过程中
			this.style.backgroundColor = 'green';
		}

		oDiv.ondragleave = function () {		//拖拽元素离开时
			this.style.backgroundColor = 'red';
		}

		oDiv.ondrop = function () {			//要想触发drop事件，就必须在dragover事件中阻止默认行为
			alert(123);
		}

		oDiv.ondragover = function () {
			document.title = i ++;			//拖拽元素在身上时（包括拖拽不动）连续触发
		
			return false;
		}
	}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>
	<div id="div1"></div>
</body>
</html>